<template>
  <div class="row q-pa-md">
    <template v-if="isConnected">
      <device-map
        class="col"
        :map-id="mapId"
        :center-connected="centerConnected"
        pointShow
        robotShow
        @getPoint="getPoint"
      />
      <q-card class="col column full-height q-ml-md" style="border-radius: 0">
        <q-tab-panels class="col-11" v-model="tab" animated>
          <q-tab-panel name="operate" style="padding: 0">
            <device-operate
              class="col q-col-gutter-x-md"
              :map-id="mapId"
              :point="point"
            />
          </q-tab-panel>
          <q-tab-panel style="padding: 0" name="instruction-list">
            <instruction-list
              :run-instruction-list="proList"
              :wait-instruction-list="waitList"
            ></instruction-list>
          </q-tab-panel>
        </q-tab-panels>
        <div class="col-1">
          <q-separator color="primary" />
          <q-tabs
            v-model="tab"
            class="full-height"
            :class="ui.cardClass"
            active-color="primary"
            indicator-color="primary"
            align="justify"
          >
            <q-tab name="operate" :label="$t('devicePage.下发指令')"></q-tab>
            <q-tab name="instruction-list" :label="$t('devicePage.指令列表')">
              <q-badge color="red" floating>{{
                proList.length + waitList.length
              }}</q-badge>
            </q-tab>
          </q-tabs>
        </div>
      </q-card>
    </template>
    <q-card class="full-height full-width col" :class="ui.cardClass" v-else>
      <div class="flex-center absolute-center text-h4">
        {{ $t("devicePage.未连接机器人") }}
      </div>
    </q-card>
  </div>
</template>

<script setup>
import { computed, onMounted, onUnmounted, ref } from "vue";
import DeviceMap from "components/device/DeviceMap.vue";
import { isConnected, status } from "src/utils/deviceWs";
import DeviceOperate from "components/device/DeviceOperate.vue";
import InstructionList from "components/device/InstructionList.vue";
import { useUiStore } from "stores/ui";
import { useAPIStore } from "stores/api";
import { api } from "boot/axios";

const ui = useUiStore();
// 计算地图id
const mapId = computed(() => status.value.mapID);
// 计算是否连接到中控
const centerConnected = computed(() => status.value.centerConnected);
const point = ref({});
// eslint-disable-next-line no-unused-vars
const tab = ref("operate");
const proList = ref([]);
const waitList = ref([]);
let timeout;

onMounted(() => {
  getCmdList();
});

onUnmounted(() => {
  console.log("销毁");
  if (timeout) clearTimeout(timeout);
});

// 获取选中后的点位id
function getPoint(p) {
  point.value = p;
}

function getCmdList() {
  getProcessing();
  getWait();
  timeout = setTimeout(() => {
    getCmdList();
  }, 1000);
}

// 获取执行中队列
function getProcessing() {
  api.get(useAPIStore().amrUrl + "amr/cmd/processing").then((rs) => {
    proList.value = rs.data;
    // /* TODO 测试 */
    // for (let i = 0; i < 10; i++) {
    //   proList.value.push({
    //     type: '类型' + i,
    //     content: {
    //       test: '森大龙开关三棱大赛噶赛嘎斯asdga森大龙开关三棱大赛噶赛嘎斯asdga森大龙开关三棱大赛噶赛嘎斯asdga森大龙开关三棱大赛噶赛嘎斯asdga森大龙开关三棱大赛噶赛嘎斯asdga森大龙开关三棱大赛噶赛嘎斯asdga森大龙开关三棱大赛噶赛嘎斯asdga森大龙开关三棱大赛噶赛嘎斯asdga森大龙开关三棱大赛噶赛嘎斯asdga'
    //     },
    //     uuid: 'string',
    //     time: '2022-03-10T12:15:50'
    //   })
    // }
  });
}

// 获取等待中队列
function getWait() {
  api.get(useAPIStore().amrUrl + "amr/cmd/waiting").then((rs) => {
    waitList.value = rs.data;
    /* TODO 测试 */
    // for (let i = 0; i < 5; i++) {
    //   waitList.value.push({
    //     type: '类型' + i,
    //     content: {
    //       test: '234234234234234'
    //     },
    //     uuid: 'string',
    //     time: '2022-03-10T12:15:50'
    //   })
    // }
  });
}
</script>
